<template>
  <!-- 燃气使用记录 -->
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="时间范围" prop="timeRange">
        <el-date-picker
          v-model="dateRange"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始日期时间"
          end-placeholder="结束日期时间"
          value-format="yyyy-MM-dd HH:mm:ss"
          :default-time="['00:00:00', '23:59:59']"
          @change="handleDateRangeChange">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="负责人" prop="people">
        <el-input
          v-model="queryParams.people"
          placeholder="请输入负责人"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['bm:gasData:add']"
        >新增</el-button>
      </el-col>
      <!-- <el-col :span="1.5">
        <el-button
          type="success"
          plain
          icon="el-icon-edit"
          size="mini"
          :disabled="single"
          @click="handleUpdate"
          v-hasPermi="['bm:gasData:edit']"
        >修改</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          icon="el-icon-delete"
          size="mini"
          :disabled="multiple"
          @click="handleDelete"
          v-hasPermi="['bm:gasData:remove']"
        >删除</el-button>
      </el-col> -->
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
          v-hasPermi="['bm:gasData:export']"
        >导出</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="gasDataList" @selection-change="handleSelectionChange" show-summary :summary-method="getSummaries" @sort-change="handleSortChange">
      <!-- <el-table-column type="selection" width="55" align="center" /> -->
      <el-table-column label="序号" width="55" align="center" prop="id" />
      <el-table-column label="启锅炉时间" align="center" prop="startDt" width="180" sortable="custom">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.startDt, '{y}-{m}-{d} {h}:{i}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="启锅炉气量(Nm³)" align="center" prop="startVal" sortable="custom">
        <template slot-scope="scope">
          <span>{{ parseFloat(scope.row.startVal).toFixed(3) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="停锅炉时间" align="center" prop="endDt" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.endDt, '{y}-{m}-{d} {h}:{i}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="停锅炉气量(Nm³)" align="center" prop="endVal">
        <template slot-scope="scope">
          <span>{{ parseFloat(scope.row.endVal).toFixed(3) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="本次用气量(Nm³)" align="center" prop="usageVal" sortable="custom">
        <template slot-scope="scope">
          <span>{{ parseFloat(scope.row.usageVal).toFixed(3) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="负责人" align="center" prop="people" />
      <el-table-column label="记录人" align="center" prop="recordPerson" />
      <el-table-column label="检验人" align="center" prop="checkPerson" />
      <el-table-column label="厂区" align="center" prop="factory" />
      <el-table-column label="记录时间" align="center" prop="createTime" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-view"
            @click="handleDetail(scope.row)"
          >详情</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['bm:gasData:edit']"
          >修改</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            v-hasPermi="['bm:gasData:remove']"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 添加或修改燃气使用记录对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="900px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="140px">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="启锅炉时间" prop="startDt">
              <el-date-picker clearable
                v-model="form.startDt"
                type="datetime"
                value-format="yyyy-MM-dd HH:mm:ss"
                placeholder="请选择启锅炉时间">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="启锅炉气(Nm³)" prop="startVal">
              <el-input-number 
                v-model="form.startVal" 
                placeholder="请输入启锅炉气量(Nm³)" 
                :precision="3"
                :step="0.001"
                :min="0"
                controls-position="right"
                @change="calculateUsage"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="停锅炉时间" prop="endDt">
              <el-date-picker clearable
                v-model="form.endDt"
                type="datetime"
                value-format="yyyy-MM-dd HH:mm:ss"
                placeholder="请选择停锅炉时间">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="停锅炉气(Nm³)" prop="endVal">
              <el-input-number 
                v-model="form.endVal" 
                placeholder="请输入停锅炉气量(Nm³)" 
                :precision="3"
                :step="0.001"
                :min="0"
                controls-position="right"
                @change="calculateUsage"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="本次用气(Nm³)" prop="usageVal">
              <el-input v-model="form.usageVal" placeholder="本次用气量(Nm³)无需填写自动计算" :readonly="true" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="负责人" prop="people">
              <el-input v-model="form.people" placeholder="请输入负责人" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="记录人" prop="recordPerson">
              <el-input v-model="form.recordPerson" placeholder="请输入记录人" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="检验人" prop="checkPerson">
              <el-input v-model="form.checkPerson" placeholder="请输入检验人" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="厂区" prop="factory">
          <el-select v-model="form.factory" placeholder="请选择厂区">
            <el-option
              v-for="dict in dict.type.company_dict"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <!-- <el-form-item label="文件地址" prop="fileUrl">
          <el-input v-model="form.fileUrl" placeholder="请输入文件地址" />
        </el-form-item>
        <el-form-item label="文件名" prop="fileName">
          <el-input v-model="form.fileName" placeholder="请输入文件名" />
        </el-form-item> -->
        <el-form-item label="生产票据">
          <div>
            <image-upload 
              v-if="!form.fileUrl"
              v-model="form.evidenceFile" 
              :fileUrl="form.fileUrl" 
              uploadUrl="/common/uploadMinio" 
              @onUploaded="handleImageUploaded"
              :key="resetKey"
              :limit="1"
              :isShowTip="false"
            />
            <div v-else class="image-preview-container">
              <div class="image-wrapper">
                <el-image 
                  :src="form.fileUrl" 
                  :preview-src-list="[form.fileUrl]"
                  style="max-width: 150px; max-height: 150px; object-fit: contain;"
                ></el-image>
                <div class="image-actions">
                  <i class="el-icon-delete delete-icon" @click="handleDeleteImage"></i>
                </div>
              </div>
              <!-- <el-button 
                type="text" 
                icon="el-icon-delete" 
                class="delete-btn" 
                @click="handleDeleteImage"
              >删除</el-button> -->
            </div>
          </div>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 查看详情对话框 -->
    <el-dialog :title="title" :visible.sync="detailOpen" width="900px" append-to-body>
      <el-form ref="detailForm" :model="form" label-width="140px">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="启锅炉时间">
              <span>{{ parseTime(form.startDt, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="启锅炉气(Nm³)">
              <span>{{ form.startVal }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="停锅炉时间">
              <span>{{ parseTime(form.endDt, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="停锅炉气量(Nm³)">
              <span>{{ form.endVal }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="本次用气量(Nm³)">
              <span>{{ form.usageVal }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="负责人">
              <span>{{ form.people }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="记录人">
              <span>{{ form.recordPerson }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="检验人">
              <span>{{ form.checkPerson }}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="厂区">
          <span>{{ form.factory }}</span>
        </el-form-item>
        <el-form-item label="生产票据" v-if="form.fileUrl">
          <el-image 
            :src="form.fileUrl" 
            :preview-src-list="[form.fileUrl]"
            style="max-width: 200px; max-height: 200px; object-fit: contain;"
          ></el-image>
        </el-form-item>
        <el-form-item label="生产票据" v-else>
          <span>暂无票据</span>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="detailOpen = false">关 闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { listGasData, getGasData, delGasData, addGasData, updateGasData } from '@/api/mes/bm/gasData';
import { mapGetters } from 'vuex';

export default {
  name: "GasData",
  dicts: ['company_dict'],
  computed: {
    ...mapGetters([
      'nickName'
    ])
  },
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 燃气使用记录表格数据
      gasDataList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        beginTime: null,
        endTime: null,
        people: null,
        startValSortFlag: 0,  // 启锅炉气量排序标志
        usageValSortFlag: 0,   // 本次用气量排序标志
        startDtSortFlag: 0   // 启锅炉时间排序标志
      },
      dateRange: [],
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        startDt: [
          { required: true, message: "启锅炉时间不能为空", trigger: "blur" }
        ],        startVal: [
          { required: true, message: "启锅炉气量(Nm³)不能为空", trigger: "blur" },
          { pattern: /^[0-9]+(\.[0-9]+)?$/, message: "启锅炉气量必须为数字", trigger: "blur" }
        ],        endDt: [
          { required: true, message: "停锅炉时间不能为空", trigger: "blur" }
        ],        endVal: [
          { required: true, message: "停锅炉气量(Nm³)不能为空", trigger: "blur" },
          { pattern: /^[0-9]+(\.[0-9]+)?$/, message: "停锅炉气量必须为数字", trigger: "blur" }
        ],        people: [
          { required: true, message: "负责人不能为空", trigger: "blur" }
        ],        recordPerson: [
          { required: true, message: "记录人不能为空", trigger: "blur" }
        ],        factory: [
          { required: true, message: "厂区不能为空", trigger: "blur" }
        ],
      },
      detailOpen: false,
      resetKey: 0,
    };
  },
  created() {
    this.getList();
  },
  watch: {
    'form.startVal': {
      handler(newVal) {
        this.calculateUsageVal();
      }
    },
    'form.endVal': {
      handler(newVal) {
        this.calculateUsageVal();
      }
    }
  },
  methods: {
    /** 查询燃气使用记录列表 */
    getList() {
      this.loading = true;
      listGasData(this.queryParams).then(response => {
        this.gasDataList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    /** 计算表格的汇总行 */
    getSummaries(param) {
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '总计';
          return;
        }
        
        // 计算需要合计的列
        const propertiesToSum = ['startVal', 'endVal', 'usageVal'];
        
        if (propertiesToSum.includes(column.property)) {
          const values = data.map(item => Number(item[column.property]));
          if (!values.every(value => isNaN(value))) {
            sums[index] = values.reduce((prev, curr) => {
              const value = Number(curr);
              if (!isNaN(value)) {
                return prev + value;
              } else {
                return prev;
              }
            }, 0).toFixed(3);
          } else {
            sums[index] = 'N/A';
          }
        } else {
          sums[index] = '';
        }
      });
      
      return sums;
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        startDt: null,
        startVal: 0.000,
        endDt: null,
        endVal: 0.000,
        usageVal: 0.000,
        people: null,
        recordPerson: null,
        checkPerson: null,
        factory: null,
        fileUrl: null,
        fileName: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null,
        remark: null,
        evidenceFile: []
      };
      this.resetForm("form");
      this.resetKey++;
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.dateRange = [];
      this.queryParams.beginTime = null;
      this.queryParams.endTime = null;
      this.queryParams.startValSortFlag = 0;
      this.queryParams.usageValSortFlag = 0;
      this.queryParams.startDtSortFlag = 0;
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length!==1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      // 设置默认记录人
      this.form.recordPerson = this.nickName;
      
      // 使用最新一条数据的负责人、检验人和厂区
      if (this.gasDataList && this.gasDataList.length > 0) {
        // 获取列表中的第一条记录（最新记录）
        const latestRecord = this.gasDataList[0];
        // 填充负责人、检验人和厂区
        this.form.people = latestRecord.people;
        this.form.checkPerson = latestRecord.checkPerson;
        this.form.factory = latestRecord.factory;
      }

      this.open = true;
      this.title = "添加燃气使用记录";
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const id = row.id || this.ids;
      getGasData(id).then(response => {
        this.form = response.data;
        // 确保fileUrl字段存在且格式正确
        if (this.form.fileUrl) {
          // 如果不是完整URL，需要添加基础路径
          if (this.form.fileUrl.indexOf('http') !== 0 && this.form.fileUrl.indexOf('https') !== 0) {
            this.form.fileUrl = process.env.VUE_APP_BASE_API + this.form.fileUrl;
          }
          // 设置evidenceFile为包含fileUrl的数组，以便上传组件显示
          this.form.evidenceFile = [this.form.fileUrl];
        } else {
          // 确保evidenceFile为空数组
          this.form.evidenceFile = [];
        }
        // 增加resetKey的值，强制刷新图片上传组件
        this.resetKey++;
        this.open = true;
        this.title = "修改燃气使用记录";
      });
    },
    /** 处理文件上传成功 */
    handleUploadSuccess(res) {
      if (res.code === 200) {
        this.form.fileUrl = res.data.url;
        // 确保URL格式正确
        if (this.form.fileUrl && this.form.fileUrl.indexOf('http') !== 0 && this.form.fileUrl.indexOf('https') !== 0) {
          this.form.fileUrl = process.env.VUE_APP_BASE_API + this.form.fileUrl;
        }
        this.form.fileName = res.data.originalFileName;
        console.log("上传成功：", this.form.fileUrl, this.form.fileName);
      }
    },
    /** 处理图片上传组件的上传完成事件 */
    handleImageUploaded(fileList) {
      if (fileList) {
        // 图片上传组件返回的是文件URL列表字符串，取第一个
        const fileUrl = fileList.split(',')[0];
        if (fileUrl) {
          this.form.fileUrl = fileUrl;
          // 确保URL格式正确
          if (this.form.fileUrl && this.form.fileUrl.indexOf('http') !== 0 && this.form.fileUrl.indexOf('https') !== 0) {
            this.form.fileUrl = process.env.VUE_APP_BASE_API + this.form.fileUrl;
          }
          // 从URL中提取文件名
          const fileName = fileUrl.substring(fileUrl.lastIndexOf('/') + 1);
          this.form.fileName = fileName;
          // 确保evidenceFile只包含一张图片
          this.form.evidenceFile = [fileUrl];
          console.log("图片上传成功：", this.form.fileUrl, this.form.fileName);
        }
      }
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          // 创建一个只包含需要提交字段的对象，明确列出所有需要的字段
          const submitData = {
            id: this.form.id,
            startDt: this.form.startDt,
            startVal: this.form.startVal,
            endDt: this.form.endDt,
            endVal: this.form.endVal,
            usageVal: this.form.usageVal,
            people: this.form.people,
            recordPerson: this.form.recordPerson,
            checkPerson: this.form.checkPerson,
            factory: this.form.factory,
            fileUrl: this.form.fileUrl,
            fileName: this.form.fileName
            // 不包含evidenceFile字段
          };
          
          console.log("提交数据：", submitData);

          if (this.form.id != null) {
            updateGasData(submitData).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addGasData(submitData).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids;
      this.$modal.confirm('是否确认删除燃气使用记录编号为"' + ids + '"的数据项？').then(function() {
        return delGasData(ids);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {});
    },
    /** 导出按钮操作 */
    handleExport() {
      const now = new Date();
      const year = now.getFullYear();
      const month = String(now.getMonth() + 1).padStart(2, '0');
      const day = String(now.getDate()).padStart(2, '0');
      const hours = String(now.getHours()).padStart(2, '0');
      const minutes = String(now.getMinutes()).padStart(2, '0');
      const seconds = String(now.getSeconds()).padStart(2, '0');
      const timestamp = `${year}-${month}-${day}T${hours}:${minutes}:${seconds}`;
      
      this.download('mes/bm/gasData/export', {
        ...this.queryParams
      }, `燃气使用记录_${timestamp}.xlsx`)
    },
    /** 时间范围变化处理 */
    handleDateRangeChange(val) {
      if (val) {
        this.queryParams.beginTime = val[0];
        this.queryParams.endTime = val[1];
      } else {
        this.queryParams.beginTime = null;
        this.queryParams.endTime = null;
      }
    },
    /** 计算用气量 */
    calculateUsageVal() {
      if (this.form.startVal && this.form.endVal) {
        // 确保startVal和endVal是数字
        const startVal = parseFloat(this.form.startVal);
        const endVal = parseFloat(this.form.endVal);
        if (!isNaN(startVal) && !isNaN(endVal)) {
          // 计算用气量并保留三位小数
          this.form.usageVal = (endVal - startVal).toFixed(3);
        }
      }
    },
    /** 计算用气量 */
    calculateUsage() {
      this.calculateUsageVal();
    },
    /** 查看详情按钮操作 */
    handleDetail(row) {
      this.reset();
      const id = row.id;
      getGasData(id).then(response => {
        this.form = response.data;
        // 确保fileUrl字段存在且格式正确
        if (this.form.fileUrl) {
          // 如果不是完整URL，需要添加基础路径
          if (this.form.fileUrl.indexOf('http') !== 0 && this.form.fileUrl.indexOf('https') !== 0) {
            this.form.fileUrl = process.env.VUE_APP_BASE_API + this.form.fileUrl;
          }
        }
        this.detailOpen = true;
        this.title = "查看燃气使用记录";
      });
    },
    /** 删除图片按钮操作 */
    handleDeleteImage() {
      this.$confirm('确认删除已上传的票据?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 清空所有相关字段
        this.form.fileUrl = null;
        this.form.fileName = null;
        this.form.evidenceFile = [];
        
        this.$message.success('票据已删除');
        console.log("图片已删除，相关字段已清空");
      }).catch(() => {
        // 用户取消操作
      });
    },
    /** 处理表格排序变化 */
    handleSortChange(column) {
      // 首先将所有排序标志重置为0
      this.queryParams.startValSortFlag = 0;
      this.queryParams.usageValSortFlag = 0;
      this.queryParams.startDtSortFlag = 0;
      
      // 然后根据当前排序列设置对应的排序标志
      if (column.prop === "startVal") {
        if (column.order === "ascending") {
          this.queryParams.startValSortFlag = 1;
        } else if (column.order === "descending") {
          this.queryParams.startValSortFlag = -1;
        }
      } else if (column.prop === "usageVal") {
        if (column.order === "ascending") {
          this.queryParams.usageValSortFlag = 1;
        } else if (column.order === "descending") {
          this.queryParams.usageValSortFlag = -1;
        }
      } else if (column.prop === "startDt") {
        if (column.order === "ascending") {
          this.queryParams.startDtSortFlag = 1;
        } else if (column.order === "descending") {
          this.queryParams.startDtSortFlag = -1;
        }
      }
      this.getList();
    },
  }
};
</script>

<style scoped>
.image-preview-container {
  display: flex;
  align-items: center;
}

.image-wrapper {
  position: relative;
  display: inline-block;
}

.image-preview-container .el-image {
  margin-right: 10px;
}

.delete-btn {
  color: #F56C6C;
  padding: 4px 10px;
}

.delete-btn:hover {
  color: #f78989;
  background-color: rgba(245, 108, 108, 0.1);
  border-radius: 4px;
}

.image-actions {
  position: absolute;
  top: 5px;
  right: 5px;
  padding: 6px;
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 4px;
  z-index: 10;
}

.delete-icon {
  font-size: 16px;
  color: #fff;
  cursor: pointer;
}

.delete-icon:hover {
  color: #f56c6c;
}
</style>
